/* all section */
body{
    background-image: linear-gradient(rgba(69, 69, 94, 0.736), rgba(43, 42, 68, 0.8)), url(images/img.paper.jpg);
    background-size: 100%;
}

/* header section */
.titlesection{
    display: flex;
    flex-direction: column;
    padding: 1em;
    padding-top: 12em;
    padding-bottom: 1em;
    align-items: center;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(66, 66, 66, 0.5),rgba(0, 0, 0, 0.2)), url(images/starry.gif); 
}

#nametag{
    text-align: center;
}

header{
    display: flex;
    justify-content: space-between;
    margin: 0em 10% 0em;
    align-items: center;
    background-color: rgba(0,0,0,0);
    padding: 2em;
    text-align: left;
    transition: all 1s ease-in-out;
}

header img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    height: 50%;
    border-radius: 50%;
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(14, 1, 47, 0.8)), url(images/circle.gif);
    background-position: 0%;    
    background-size: 100%;
    padding: 1em;
    margin: 1em;
    box-shadow: 0 0 50px rgb(123, 154, 255);
}

header p{
    font-style: italic;
    font-size: 1.25em;
}

/* LINKS SECTION */

.links{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25em 1em 0.25em;
}


.links img{
    width: 30px;
    height: auto;
    padding: 0.25em;
}

.links a{
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5em;
    transition: all 0.2s ease-in-out;
    img{
        transform: scale(1);
        transition: all 0.2s ease-in-out;
    }
}

.links a:hover{
    background-color: rgb(123, 154, 255,0.5);
    border-radius: 50%;
    box-shadow: 0px 0px 20px rgb(123, 154, 255); 
    img{
        transform: scale(1.2);
        transition: all 0.2s ease-in-out;
    }
}

/* about section */
/* the cv button under the about me writing */
.cvlink{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9em;
    padding: 1em 0em 2em;
}

.cvupdated{
    font-size: 0.75rem;
    font-style: italic;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.65);
    text-shadow: 0 1px 4px black;
}

/* the half black fill the abutton class gives is invisible against this
   section, so it gets an outline of its own to stand out */
.cvlink a{
    display: inline-block;
    padding: 1em 2.5em;
    letter-spacing: 0.05em;
    background-color: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
}

.cvlink a:hover{
    background-color: white;
    border-color: white;
    color: black;
}

#about{
    background-image: url(images/tech-flow.gif);
    display: flex;
    background: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 41, 131, 0.1), rgba(0,0,0,1)), url(images/tech-flow.gif);
    justify-content: center;
    align-items: center;
    padding: 5%;

    h2{
        border: 1px solid white;
        background-color: rgba(0,0,0,0.5);
        border-radius: 25px;
        text-align: center;
    }
    p{
        background-color: rgba(0, 0, 0, 0.5);
        padding: 1em;
        border-radius: 10px;
        text-align: justify;
        text-align-last:center;
    }

}




/* redirect box (to external pages) */
.redirects{
    background: linear-gradient(rgba(0, 0, 0, 0.767), rgba(61, 61, 61, 0.753),  rgba(0, 0, 0, 0.767)), url(images/white-paper.gif);
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    flex: 1;
    gap: 0em;
    padding: 0;


    h2{
        background-color: rgb(0, 0, 0);
        border: 0px;
        margin: 0;
        border-radius: 0px;
    }
    img{
        width:30%;
    }
    /*backgrounds of titles*/
    .projectstitle{
        background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(images/code.gif);
        background-position: 20%;
        background-size:100%;
    }
    .educationtitle{
        background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(images/education.gif);
        background-position: 50%;
        background-size:100%;
    }
    .experiencetitle{
        background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(images/scifi\ pins.gif);
        background-position: 50%;
        background-size:100%;
    }
    .skillstitle{
        background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(images/skills.gif);
        background-position: 50%;
        background-size:100%;
    }
    .blogtitle{
        background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(images/typingblog.gif);
        background-position: 50%;
        background-size:100%;
    }
}

.redirectbox:hover{
    transition: all 0.2s ease-in-out;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgb(255, 0, 0);
}

.buttonstyle{
    text-align: center;
    box-shadow: 0 0 10px rgba(109, 221, 252, 0.5);
    align-items: center;
    background-color: rgba(0,0,0,0.5);
    border-radius: 10px;
    padding: 1em;
    transition: background-color 0.2s ease-in-out;
    width: 50%;
    transition: all 0.2 ease-in-out;
}

.redirects a{
    text-align: center;
    text-decoration: none;
    color: white;
    width: 100%;
}

.redirectstitle h1{
    background-color: rgba(0,0,0,0.8);
    border-radius: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0.5em 1em 0.5em;
    text-align: center;
    border: 0px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}



/* REPONSIVE STYLES FOR MOBILE */

@media screen and (max-width: 767px) {
    .titlesection{
        padding: 1em;
        padding-top: 40%;
        padding-bottom: 40%;
    }

    header{
        display: flex;
        flex-direction: column;
        img{
            padding: 2em;
            width: 50vw;
        }
    }

    #about{
        display: flex;
        flex-direction: column;
        h2{
            width: 90%;
        }
    }
    
    .redirects{
        display: flex;
        flex-direction: column;
    }


    
}